<template>
    <div v-if="modelValue==STATUS.SPULIST">
        <el-button type="primary" :icon="Plus" @click="addSpu" :disabled="!categoryStore.category3Id">添加SPU</el-button>
        <el-table :data="spuInfoList" class="mt-10 mb-10" border v-loading="loading">
            <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="{ row, $index }">
                    <el-button type="success" :icon="Plus" size="small" @click="handlePlus(row)"></el-button>
                    <el-button type="warning" :icon="Edit" size="small" @click="handleEdit(row)"></el-button>
                    <el-button type="info" :icon="InfoFilled" size="small" @click="handleInfo(row)"></el-button>
                    <el-popconfirm :title="`请确认是否删除[${row.spuName}]?`" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button type="danger" :icon="Delete" size="small"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 抽屉 -->
        <el-drawer v-model="drawer" :direction="direction" size="100" >
            <template #header>
                <h4>{{ `[${spuInfo?.spuName}]的sku列表` }}</h4>
            </template>
            <template #default>
                <el-table :data="skuList">
                    <el-table-column label="名称" prop="skuName" />
                    <el-table-column label="价格" prop="price" />
                    <el-table-column label="重量" prop="weight" />
                    <el-table-column label="默认图片">
                        <template #default="{ row, $index }">
                            <img :src="row.skuDefaultImg" width="80" height="80" >
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-drawer>
        <el-pagination v-model:currentPage="page" v-model:page-size="limit" :page-sizes="[3,6,9]"
            layout="prev, pager, next, jumper, ->, sizes, total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { Delete, Edit, InfoFilled, Plus } from '@element-plus/icons-vue';
import spuApi, { type spuModel } from '@/api/spu'
import { ref, watch } from 'vue'
import useCategoryStore from '@/stores/category'
import { STATUS } from '../../index.vue'
import Pubsub from 'pubsub-js'
import { ElMessage } from 'element-plus';
import type { SkuModel } from '@/api/sku';
import skuApi from '@/api/sku'
defineProps<{
    modelValue: number
}>()
const emit = defineEmits<{
    (event: 'update:modelValue', status: number): void
}>()
const loading = ref(false)
const page = ref(1)
const limit = ref(3)
const total = ref(0)
const spuInfoList = ref<spuModel[]>()
const categoryStore = useCategoryStore();
const skuList = ref<SkuModel[]>([])
const drawer = ref(false)
const direction = ref('ttb')
const spuInfo = ref<spuModel>()
// 获取初始化数据
const getSpuPage = async () => {
    let result = await spuApi.getSpuPage(page.value, limit.value, categoryStore.category3Id)
    spuInfoList.value = result.records;
    total.value = result.total;
}
// 监听category3Id的变化
watch(() => categoryStore.category3Id, () => {
    getSpuPage();
}, { immediate: true })
// 新增spu
const addSpu = () => {
    emit('update:modelValue', STATUS.SPUFORM)
}
// 新增sku
const handlePlus = (row: spuModel) => {
    emit('update:modelValue', STATUS.SKUFORM)
    Pubsub.publish('getSpu', row)
}
// 编辑spu
const handleEdit = (row: spuModel) => {
    emit('update:modelValue', STATUS.SPUFORM)
    Pubsub.publish('getSpuInfo', row)
}
// 查看
const handleInfo = async (row: spuModel) => {
    drawer.value = true
    spuInfo.value = row
    try {
        let result = await skuApi.findBySpuId(row.id as number)
        skuList.value = result
    } catch (error) {
        ElMessage.error('获取sku列表失败')
    }
}
// 删除
const handleDelete = async (row: spuModel) => {
    try {
        await spuApi.deleteSpu(row.id!)
        getSpuPage();
    } catch (error) {
        ElMessage.error('删除失败,请重试')
    }
}
// 切换每页显示
const handleSizeChange = (val: number) => {
    limit.value = val
    getSpuPage();
}
// 翻页
const handleCurrentChange = (val: number) => {
    page.value = val
    getSpuPage();
}
Pubsub.subscribe('update', () => {
    getSpuPage();
})
</script>

<style scoped>

</style>